<template>
  <div>
    <!-- 搜索功能 -->
    <div class="trade-stock" style="float: right;">
      <div class="stock-search" avalonctrl="vmStockSearch" style="display: block;">
        <div class="clearfix">
          <input v-model="code" class="search-inp" placeholder="输入股票名称/代码/简拼">
          <button @click="remove" class="search-btn">取消</button>
        </div>
        <div v-if="shares.length>0" class="search-result" avalonctrl="vmStockSearch">
          <table style="width:100%;text-align:left">
            <thead>
              <tr>
                <th>名称</th>
                <th style="width: 80px">代码</th>
                <th style="width: 70px">现价</th>
              </tr>
            </thead>
            <tbody>
              <tr @click="changeCode(item.code)" v-for="(item,index) in shares" :key="index">
                <td>{{item.name}}</td>
                <td>{{item.code | filtersName}}</td>
                <td>{{item.current_price}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from '@/common/js/Axios'
export default {
    data(){
        return {
            code:"",
            shares:[]
        }
    },
    watch:{
        code(v){
            this.getSearch(v);
        }
    },
    methods : {
        //切换所选股票
        changeCode(code){
          console.log(1);
          localStorage.setItem("bugCode",code);
          this.$router.push("/cl/create");
        },
        //清除列表
        remove(){
            this.code = "";
        },
        //搜索功能
        getSearch(v){
            Axios.getAxios('/api/stock/search',{
                code:v
            }).then(res=>{
                this.shares = res.data.data;
            },err=>{
                console.log(err);
            })
        }
    }
};
</script>

<style lang="stylus" scoped>
</style>
